[iOS 10] メッセージ拡張 MSStickerBrowserViewControllerを使用したビューの作成

1 はじめに

MSStickerBrowserViewControllerは、MSStickerView(ステッカー)を簡単に管理できるビューコントローラーです。 これを利用すると、ステッカーが簡単に管理できる他、長押しで、ステッカーを剥がして、ドラッグアンドドロップでメッセージに貼りつけたりする事ができます。

MSStickerBrowserViewControllerは、ビューとしてMSStickerBrowserViewを保持しています。また、データソースのデリゲートになっています。なお、データソースはMSStickerの配列です。

iMessage Applcationでプロジェクトを作成すると、デフォルトでは、ストーリーボード（MainInterface.storyboard）のビューが使用されていますが、最終的には、これを置き換えます。

なお、その他のメッセージ拡張については下記をご参照下さい。
[iOS 10] メッセージ拡張の作成方法
[iOS 10] メッセージ拡張 MSMessageTemplateLayoutによるテキストや画像（映像）の配置
[iOS 10] メッセージ拡張 MSSessionで「まるばつゲーム」を作ってみた
[iOS 10] メッセージ拡張 ノンプログラミングによるスタンプ作成
[iOS 10] メッセージ拡張 ノンプログラミングによるアニメーションスタンプ作成

2 実装

(1) プロジェクト作成

File > New > Project から iMessage Applicationで新規にプロジェクトを作成します。

(2) MSStickerBrowserViewController

続いて、MessageExtensionプロジェクトに New File で Ccoa Touch Classを追加します。

クラスは、MSStickerBrowserViewControllerを継承します。

Messagesをimportします。

(3) データソース（MSSticker）

データソースとして、MSStickerの配列を用意します。

そして、MSStickerBrowserViewDataSourceプロトコルのメソッドである、numberOfStickers()で要素数、stickerBrowserView()で指定されたインデックスのMSStickerを返すようにします。

import UIKit
import Messages

class MyMSStickerBrowserViewController: MSStickerBrowserViewController {

    var stickers = [MSSticker]()

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func numberOfStickers(in stickerBrowserView: MSStickerBrowserView) -> Int {
        return stickers.count
    }

    override func stickerBrowserView(_ stickerBrowserView: MSStickerBrowserView, stickerAt index: Int) -> MSSticker {
        return stickers[index]
    }

・・・省略・・・

(4) データの初期化

MSStickerBrowserViewControllerの生成時に、MSStickerを生成するコードを追加します。

class MyMSStickerBrowserViewController: MSStickerBrowserViewController {

    var stickers = [MSSticker]()

    override func viewDidLoad() {
        super.viewDidLoad()

        for n in 1...6 {
            if let path = Bundle.main.path(forResource: "animation00\(n)", ofType: "gif") {
                let url = URL(fileURLWithPath: path)
                stickers.append(try! MSSticker(contentsOfFileURL: url, localizedDescription: ""))
            }
        }
    }

・・・省略・・・

使用される画像は、MessageExtensionプロジェクトに追加しておきます。

(5) ビューの変更

最後に、MessagesViewControllerの方で、今作成したビューに置き換えます。

import UIKit
import Messages

class MessagesViewController: MSMessagesAppViewController {

    var myViewController: MyMSStickerBrowserViewController!

    override func viewDidLoad() {
        super.viewDidLoad()

        myViewController = MyMSStickerBrowserViewController(stickerSize: .small)
        myViewController.view.frame = self.view.frame
        self.addChildViewController(myViewController)
        myViewController.didMove(toParentViewController: self)
        self.view.addSubview(myViewController.view)
    }
・・・省略・・・

実際に利用している様子です。

3 最後に

今回は、MSStickerBrowserViewControllerを使用して、メッセージ拡張のビューを作成してみました。 メッセージ拡張アプリを作成する場合、ビューの作成が必要になりますが、このようにステッカーを定型的に並べるだけであれば、これを使用することで非常に簡単に作成することができます。

4 参考リンク

API Reference Framework Messages
アニメーションGIFは、こちらから利用させて頂きました　http://sozai-good.com/